import LineChart from "./LineChart";
import GridItem from "../common/GridItem";
import styles from "../index.module.less";
import Table from "./Table";
import PieChart from "./PieChart";
import { Dayjs } from "dayjs";
import { merchantMap } from "../store";
import { queryParams } from "./store";
export function GetPercent(num, total) {
  if (+num === 0 || +total === 0) return "--";
  const percentage = (num / total - 1) * 100;
  const result = +percentage.toFixed(2);
  if (result === 0) return "--";
  return result > 0 ? "+" + result + "%" : result + "%";
}
// 本月一号到今天的连续时间
export const GetThisMonthNo1ToToday = () => {
  let currentDate = new Date();
  let year = currentDate.getFullYear();
  let month = currentDate.getMonth() + 1;
  let day = currentDate.getDate();
  let datesList: string[] = [];
  for (let i = 1; i <= day; i++) {
    let dateString = `${year}-${month < 10 ? "0" : ""}${month}-${
      i < 10 ? "0" : ""
    }${i}`;
    datesList.push(dateString);
  }
  return datesList;
};
export const get_fontColor = (string) => {
  const number = parseFloat(string);
  if (isNaN(number)) return "";
  if (isNumber(number) && number > 0) return styles["s-00ff00"];
  if (isNumber(number) && number < 0) return styles["s-ff0000"];
};
export default defineComponent({
  setup(props, { expose }) {
    const _self = reactive<any>(getCurrentInstance());
    const formInline = reactive({
      today_cum_pay_user_num: "",
      today_cum_user_num: "",
      today_launch_user_num: "",
      today_login_pay_user_num: "",
      today_new_user_num: "",
      today_pay_user_num: "",
      updated_at: "",
      yesterday_cum_pay_user_num: "",
      yesterday_cum_user_num: "",
      yesterday_launch_user_num: "",
      yesterday_login_pay_user_num: "",
      yesterday_new_user_num: "",
      yesterday_pay_user_num: "",
    });
    const fetchData = async () => {
      const res: any = await overviewApi.queryUserBoard({
        merchant_user_id:
          queryParams.merchant_user_id === ""
            ? undefined
            : queryParams.merchant_user_id,
        date: queryParams.date.format("YYYY-MM-DD"),
      });
      if (res.code != 200) return message.error(res.message);
      initObjAttr(formInline, res.data, "target");
    };
    const initPage = async () => {
      _self.refs.line_chart.initPage();
      _self.refs.pie_chart.initPage();
      _self.refs.table.initPage();
      await fetchData();
    };
    expose({ initPage });
    return () => {
      const get_totalUser = GetPercent(
        formInline.today_cum_user_num,
        formInline.yesterday_cum_user_num
      );
      const get_addUser = GetPercent(
        formInline.today_new_user_num,
        formInline.yesterday_new_user_num
      );
      const get_platformUser = GetPercent(
        formInline.today_launch_user_num,
        formInline.yesterday_launch_user_num
      );
      const get_totalPay = GetPercent(
        formInline.today_cum_pay_user_num,
        formInline.yesterday_cum_pay_user_num
      );
      const get_payNum = GetPercent(
        formInline.today_pay_user_num,
        formInline.yesterday_pay_user_num
      );
      const get_activePay = GetPercent(
        formInline.today_login_pay_user_num,
        formInline.yesterday_login_pay_user_num
      );

      return (
        <div class={styles.custom_board}>
          <div class={styles.Flex_wrap}>
            <div class={styles.flex_item}>
              <s-title style="margin-bottom: 0px">{$t("overview23")}</s-title>
            </div>
            <div class={styles.search}>
              <div class={styles.flex_item}>
                <div class={styles.title}>{$t("table14")}</div>
                <div>
                  <a-select
                    v-model:value={queryParams.merchant_user_id}
                    onChange={(value) => {
                      fetchData();
                    }}
                    style="width: 150px"
                    placeholder={$t("placeholder24")}
                    options={merchantMap}
                  ></a-select>
                </div>
              </div>
              <div class={styles.flex_item}>
                <div class={styles.title}>{$t("table73")}：</div>
                <div>
                  <s-date-picker
                    v-model={queryParams.date}
                    format={(value) => value.format("YYYY-MM-DD")}
                    onChange={function (date: Dayjs, dateString: string) {
                      queryParams.date = date;
                      fetchData();
                    }}
                  />
                </div>
              </div>
            </div>
          </div>

          <div class={styles.title}>{$t("overview24")}</div>

          <div class={styles.Grid_Box}>
            <GridItem
              record={{
                title: $t("overview25"),
                tips: `${$t("overview33")}=(${$t("overview34")}/${$t(
                  "overview35"
                )} - 1) * 100%`,
                data: formInline.today_cum_user_num,
                compare: (
                  <>
                    <i>{$t("overview18") + ":\r\n"}</i>
                    <i class={get_fontColor(get_totalUser)}>{get_totalUser}</i>
                  </>
                ),
              }}
            />
            <GridItem
              record={{
                title: $t("overview26"),
                tips: `${$t("overview33")}=(${$t("overview36")}/${$t(
                  "overview37"
                )} - 1) * 100%`,
                data: formInline.today_new_user_num,
                compare: (
                  <>
                    <i>{$t("overview18") + ":\r\n"}</i>
                    <i class={get_fontColor(get_addUser)}>{get_addUser}</i>
                  </>
                ),
              }}
            />
            <GridItem
              record={{
                title: $t("overview27"),
                tips: `${$t("overview33")}=(${$t("overview38")}/${$t(
                  "overview39"
                )} - 1) * 100%`,
                data: formInline.today_launch_user_num,
                compare: (
                  <>
                    <i>{$t("overview18") + ":\r\n"}</i>
                    <i class={get_fontColor(get_platformUser)}>
                      {get_platformUser}
                    </i>
                  </>
                ),
              }}
            />
            <GridItem
              record={{
                title: $t("overview28"),
                tips: `${$t("overview33")}=(${$t("overview40")}/${$t(
                  "overview41"
                )} - 1) * 100%`,
                data: formInline.today_cum_pay_user_num,
                compare: (
                  <>
                    <i>{$t("overview18") + ":\r\n"}</i>
                    <i class={get_fontColor(get_totalPay)}>{get_totalPay}</i>
                  </>
                ),
              }}
            />
            <GridItem
              record={{
                title: $t("overview29"),
                tips: `${$t("overview33")}=(${$t("overview42")}/${$t(
                  "overview43"
                )} - 1) * 100%`,
                data: formInline.today_pay_user_num,
                compare: (
                  <>
                    <i>{$t("overview18") + ":\r\n"}</i>
                    <i class={get_fontColor(get_payNum)}>{get_payNum}</i>
                  </>
                ),
              }}
            />
            <GridItem
              record={{
                title: $t("overview30"),
                tips: `${$t("overview33")}=(${$t("overview44")}/${$t(
                  "overview45"
                )} - 1) * 100%`,
                data: formInline.today_login_pay_user_num,
                compare: (
                  <>
                    <i>{$t("overview18") + ":\r\n"}</i>
                    <i class={get_fontColor(get_activePay)}>{get_activePay}</i>
                  </>
                ),
              }}
            />
          </div>

          <div class={styles.title}>{$t("overview31")}</div>
          <LineChart ref="line_chart" />
          <div class={styles.title}>{$t("overview32")}</div>
          <Table ref="table" />
          <PieChart ref="pie_chart" />
        </div>
      );
    };
  },
});
